<script setup>
import HelloWorld from './components/HelloWorld.vue'
//数据绑定 导入组件
import Demo from './components/Demo.vue'
import Ref from './components/Ref.vue'
import Reactive from './components/Reactive.vue'
import Task01 from './components/task/task01.vue'
import ToRef from './components/ToRef.vue'
import ToRefs from './components/ToRefs.vue'
//指令
import VText from './components/VText.vue'
import VBind from './components/VBind.vue'
import Task02 from './components/task/task02.vue'
import VOn from './components/VOn.vue'
import VModel from './components/VModel.vue'
import VIf from './components/VIf.vue'
import VShow from './components/VShow.vue'
import VFor1 from './components/VFor1.vue'
import VFor2 from './components/VFor2.vue'
import Task03 from './components/task/task03.vue'
//事件对象
import EventObject from './components/EventObject.vue'
import EventObject2 from './components/EventObject2.vue'
//计算属性
import Computed from './components/Computed.vue'
import Watch from './components/Watch.vue'
//样式绑定
import BClass from './components/BClass.vue'
import BStyle from './components/BStyle.vue'
import CompositionAPI from './components/CompositionAPI.vue'		
import OptionsAPI from './components/OptionsAPI.vue'		
import ComponentA from './components/ComponentA.vue'
import ParentA from './components/ParentA.vue'

//组件间传递数据
</script>

<template>
	<ParentA></ParentA>
	
	<!-- <CompositionAPI></CompositionAPI> -->
	<!-- <BStyle></BStyle> -->
	<!-- <BClass></BClass> -->
	<!-- <Watch></Watch> -->
	<!-- <Computed></Computed> -->
	<!-- <EventObject2></EventObject2> -->
	<!-- <EventObject></EventObject> -->
	<!-- <Task03></Task03> -->
	<!-- <VFor2></VFor2> -->
	<!-- <VFor1></VFor1> -->
	<!-- <VShow></VShow> -->
	<!-- <VIf></VIf> -->
	<!-- <VModel></VModel> -->
	<!-- <HelloWorld msg="Hello Vue 3 + Vite" /> -->
	<!-- <VOn></VOn> -->
	<!-- <Task02></Task02> -->
	<!-- <VBind></VBind> -->
	<!-- <VText></VText> -->
	<!-- <ToRefs></ToRefs> -->
	<!-- <ToRef></ToRef> -->
	<!-- <Task01></Task01> -->
	<!-- <Reactive></Reactive> -->
	<!-- <Ref></Ref> -->
	<!-- <Demo></Demo> -->
	
<!-- <h3>根组件</h3> -->
	<!-- 使用组件 -->
	<!-- <div> -->
		<!-- <GobalComponent></GobalComponent> -->
		<!-- 组件的标签名可以使用帕斯卡命名法命名 -->
		<!-- <ComponentA></ComponentA> -->
		<!-- 组件的标签名可以使用短横线分隔命名法命名 -->
		<!-- <component-a></component-a> -->
		<!-- <OptionsAPI></OptionsAPI> -->
	<!-- </div> -->
</template>

<style scoped>
   h3{
	   color: red;
   }
   /* 深度选择器是在父级组件定义的 */
   :deep(.bg){
	   color: blue;
   }
</style>
